import React, { Component } from 'react';
import axios from 'axios';
import { Spin } from 'antd';
// import $ from  'jquery';
import './SongList.scss';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
        pop : this.props.match.params.id,
        loading : true,
        List : []
    }
  }

  componentDidMount () {
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.state.pop+'&type=song&limit=25&offset=0')
      .then(data => {
        console.log(data)
        this.setState({
            List : data.data.data,
            loading : false
        })
      })
      .catch((err) => {
        console.log(err)
      })
  }

  render () {
    return (
      <div className = "SeekList">
        <ul>
          <li>
            <p>歌曲</p>
            <b>歌手</b>
            <span>专辑</span>
            <em>时长</em>
          </li>
          {
            this.state.loading
            ?
            <Spin size="large" />
            :
            this.state.List.map((item, index) => {
            return (
                <li key={ item.id }>
                    <p>{ item.name }</p>
                    <b>{ item.singer }</b>
                    <span>
                      <img src={item.pic} alt=""/>
                    </span>
                    {
                      item.time%60 < 10
                      ?
                      <em>{ '0'+parseInt(item.time/60)+':0'+item.time%60 }</em>
                      :
                      <em>{ '0'+parseInt(item.time/60)+':'+item.time%60 }</em>
                    }
                </li>
            )
            })
          }
        </ul>
      </div>
    )
  }
}

export default Com;
